<template>
	<view class="pend-box">

		<view class="task-top">
			<view class="task-top-fixed">
				<view class="ac-list">
					<text class="ac-item" :class="[{active: tabIndex==1}]" @click="changeTab(1)">待审核</text>
					<text class="ac-item" :class="[{active: tabIndex==2}]" @click="changeTab(2)">已审核</text>
				</view>
				<view class="task-top-line"></view>
			</view>
		</view>
		<view class="examine-box">
			<view class="jd-list">
				<view class="item" v-if="tabIndex==1" @click="pairExample()">
					<view class="info">
						<view class="head">
							<image src="/static/jdxx.png" mode="aspectFill"></image>
						</view>
						<view class="name-cla">
							<text style="color:#FF4F01;">结对消息</text>
							<view class="num-cla">
								<text>结对申请 | 重要他人审核</text>
							</view>
						</view>
					</view>
					<view class="time-num">
						<text class="number" v-if="shNumber>0">{{shNumber}}</text>
					</view>
				</view>
				<view class="item" @click="activityPage()">
					<view class="info">
						<view class="head">
							<image src="/static/jdxx.png" mode="aspectFill"></image>
						</view>
						<view class="name-cla">
							<text style="color:#FF4F01;">活动审核</text>
							<view class="num-cla">
								<text>活动审核</text>
							</view>
						</view>
					</view>
					<view class="time-num" v-if="tabIndex==1">
						<text class="number" v-if="waitExamineTotal>0">{{waitExamineTotal}}</text>
					</view>
				</view>
				<view class="item" v-for="(item, i) in studentList" :key="i" @click="seeDetails(item.student.accountId, item.unCheckNum, item.student.name)">
					<view class="info">
						<view class="head">
							<image :src="utils.headImage(item.student)" mode="aspectFill"></image>
						</view>
						<view class="name-cla">
							<text>{{item.student.name}}</text>
							<view class="num-cla">
								<text class="student-no">学号：{{item.student.studentNo}}</text>
								<text>{{classMap[item.student.clasId]}}</text>
							</view>
						</view>
					</view>
					<view class="time-num time-num1">
						<view style="white-space: nowrap;">{{utils.handleTs(item.student.time)}}</view>
						<text class="number" v-if="item.unCheckNum>0">{{item.unCheckNum}}</text>
					</view>
				</view>
				<!-- 如果数据只有一页时，不显示 -->
				<uni-load-more v-show="studentList.length >= 10" :status="loadMore" color="#BFBFBF"></uni-load-more>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			onShow: { // 页面执行onShow时值改变
				type: Number,
				default: 0
			},
		},
		watch: {
			onShow(val){
				this.changeTab(this.tabIndex)
			},
		},
		data() {
			return {
				msgTips: getApp().globalData.msgTips, // 消息提示
				classMap: {}, // 所有班级信息
                studentList: [], // 待审核的学生列表
				tabIndex: 1, // 1.待审核 2.已审核
				shNumber: 0, // 结对消息的数量
				waitExamineTotal: 0, // 待审核数量
				currentPage: 1, // 当前页
				loadMore: 'more', // more获取更多数据 loading加载中 no-more 暂无更多数据 
			}
		},
		mounted() {
			this.changeTab(this.tabIndex)
		},
		methods: {
			// 处理头像显示
			headHandle(info){
				let str = ''
				// 1男 2.女 
				let sex = info.sex==2 ?2 : 1
				str = info.avatarUrl||''
				if(!str){
					str = `/static/stu${sex}.png`
				}
				return str;
			},
			// 切换时触发
			changeTab(index){
				this.tabIndex = index;
				this.studentList = [];
				this.currentPage = 1
				this.getNeedExamine();
			},
			// 获取所有需要 审核任务的学生
			getNeedExamine(){
				this.loadMore = 'loading'
				this.api.get('examine/findExamineStudentPage', {
					state: this.tabIndex,
					page: this.currentPage,
					limit: 10
				}).then(res=>{
					uni.stopPullDownRefresh();
					let newOrgGraders = getApp().globalData.baseInfo.newOrgGraders;
					for(let i=0; i<newOrgGraders.length; i++){
						Object.assign(this.classMap, newOrgGraders[i])
					}
					if(res.data.state == 'ok') {
						let examinePage = res.data.examinePage;
						if(examinePage){
							this.studentList = this.studentList.concat(examinePage.list);
							if(examinePage.totalPage <= this.currentPage){
								this.loadMore = 'no-more'
							}
						}
						
					}
					this.getTipsData()
				})
				this.getWaitExamineTotal()
			},
			// 获取所有提示的数据
			getTipsData(){
				// 需要审核的任务 
				let unExaminTask = getApp().globalData.msgTips
				if(!unExaminTask){
					
					uni.$emit('getMsgTips', res => {
						this.getTipsData()
					})
					return;
				}
				// 删除审核过的任务id
				let deleteTaskIds = uni.getStorageSync('deleteTaskIds') || [];
				for(let i=0; i<deleteTaskIds.length; i++){
					let deleteI = unExaminTask.findIndex(item => item.id == deleteTaskIds[i]);

					if(deleteI != -1){
						unExaminTask.splice(deleteI, 1)
						
					}
				}
				getApp().globalData.msgTips = unExaminTask
				// 删除之后，清楚缓存的信息
				uni.removeStorageSync('deleteTaskIds');
				// 处理红点显示
				this.utils.noticeRedDot()

				this.getUncheckNumber()
			},
			// 审核任务详情
			seeDetails(accountId, state, name){
				let path = '';
				uni.setStorageSync('toBeReviewedStudents', this.studentList)
				state = this.tabIndex;

				path = `/pages/teachers/audit-details?accountId=${accountId}&state=${state}&name=${name}`
				uni.navigateTo({
					url: path
				})
			},
			// 获取结对消息的数量
			getUncheckNumber(){
				let msgTips = getApp().globalData.bdxs_shbyrwdss||{};
				if(!msgTips.bdxs){
					uni.$emit('getMsgTips', res => {
						this.getUncheckNumber()
					})
					return;
				}
				// 待审核的榜样和榜样任务
				let shbydss = msgTips.shbyrwdss.concat(msgTips.shbydss) || []
				this.shNumber = msgTips.bdxs.length + shbydss.length;
				console.log(196, this.shNumber)
			},
			// 结对消息页面
			pairExample(){
				uni.navigateTo({
					url: "/pages/teachers/pair-example"
				})
			},
			// 老师查询所有活动中待审核的数量
			getWaitExamineTotal(){
				this.api.get('activity/getWaitExamineTotal').then(res=>{
					if(res.data.state == 'ok'){
						this.waitExamineTotal = res.data.total
					}
				})
			},
			// 活动列表页面
			activityPage(){
				uni.navigateTo({
					url: `/pages/teachers/activity-page?state=${this.tabIndex}`
				})
			}
        }
	}
</script>

<style lang="less" scoped>
	.pend-box{
		position: relative;
		z-index: 1;
	}
	.task-top{
		height: 76rpx;
		
	}
	.task-top-fixed{
		position: fixed;
		/* #ifdef H5 */
		top: 88rpx;
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		/* #ifndef H5 */
		top: calc(88rpx + 27px);
		left: 0;
		right: 0;
		/* #endif */
		z-index: 1;
	}
	.task-top-line{
		height: 36rpx;
		border-radius: 32rpx 32rpx 0 0;
		background-color: #fff;
	}
    .ac-list{
        margin-top: 43rpx;
        display: flex;
        align-items: center;
        padding: 0 32rpx;
    }
    .ac-item{
		width: 142rpx;
        color: #666;
        font-size: 28rpx;
        padding-bottom: 20rpx;
		text-align: center;
        &.active{
            color: #262E3F;
            font-weight: bold;
            background-image: url(~@/static/campus/line-bg.png);
            background-size: 45rpx 18rpx;
            background-repeat: no-repeat;
            background-position: center 26rpx;
        }
    }
	.rili-icon{
		width: 37rpx;
		height: 40rpx;
		
	}
	.rili-box{
		font-size: 0;
		
	}
	.red-dot{
		position: relative;
		&::after{
			position: absolute;
			content: '';
			top: -10rpx;
			right: -10rpx;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background: #f43530;
		}
	}
	.examine-box{
		background-color: #fff;
		overflow: hidden;
		border-radius: 32rpx 32rpx 0 0;
		padding: 36rpx 24rpx 0;
	}
	.jd-list{
		// margin-top: 20rpx;
		// background: #fff;
		height: calc(100vh - 220rpx - 32rpx - 50px);
		/* #ifndef H5 */
		height: calc(100vh - 220rpx - 27px - 32rpx);
		/* #endif */
		overflow-y: scroll;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 160rpx;
		font-size: 0;
		position: relative;
		&::after{
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 200%;
			height: 2rpx;
			background-color: #EEEEEE;
			transform: scale(0.5) translateX(-50%);
		}
	}
	.info{
		width: calc(100% - 40rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.head{
		position: relative;
		margin-right: 32rpx;
		image{
			width: 88rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}
	}
	.name-cla{
		width: calc(100% - 120rpx);
		font-size: 28rpx;
		line-height: 24rpx;
		color: #333333;
		font-weight: 600;
		.num-cla{
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-top: 18rpx;
			color: #999999;
			font-weight: normal;
			font-size: 24rpx;
		}
		.student-no{
			display: none;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-right: 24rpx;
			max-width: 60%;
		}
	}
	.time-num{
		font-size: 24rpx;
		color: #BCBCBC;
	}
	.time-num1{
		text-align: right;
	}
	.number{
		margin-top: 12rpx;
		display: inline-block;
		border-radius: 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		min-width: 40rpx;
		padding: 0 13rpx;
		background: #FA7F45;
		color: #fff;
		font-size: 24rpx;
		box-sizing: border-box;
		text-align: center;
		white-space: nowrap;
	}

</style>
